layui.use(['table', 'layer'], function () {
    var layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        table = layui.table;


    var tableIns = table.render({
        id: 'roleTable'
        , elem: '#roleList'
        //容器的高度，full差值
        , height: 'full-125'
        //请求数据的接口 从
        , url: '/crm/role/list' //数据接口
        , cellMinWidth: 95  //最小表格宽度
        , limit: 10   //每页显示数量为10条
        , page: true //开启分页
        , limits: [10, 20, 30, 40]  // 每页页数的可选项
        , toolbar: '#toolbarDemo'
        , cols: [[ //表头
            //field 设定字段名。非常重要，且是表格数据列的唯一标识
            //title设定标题名称
            //sort 是否允许排序（默认：false）。如果设置 true，则在对应的表头显示排序icon，从而对列开启排序功能。
            //fixed
            {type: 'checkbox', fixed: 'center'}
            , {field: 'id', title: 'ID', sort: true, fixed: 'left'}
            , {field: 'roleName', title: '角色名', align: 'center'}
            , {field: 'roleRemark', title: '角色备注', align: 'center'}
            , {field: 'createDate', title: '创建时间', align: 'center'}
            , {field: 'updateDate', title: '更新时间', align: 'center'}
            , {title: '操作', templet: '#roleListBar', fixed: 'right', align: 'center', minWith: '150'}
        ]]
    });

    $(".search_btn").click(function () {
        /**
         * 表格重载
         * 多条件查询
         */
        tableIns.reload({
            where: {
                roleName: $("[name='roleName']").val()  //角色名称
            }
            , page: {
                curr: 1  //从第一页开始
            }
        });
    });

    table.on('toolbar(roles)', function (data) {
        if (data.event == "add") {
            //打开添加/修改对话框
            openAddOrUpdateRoleDialog(null);

        } else {
            //授权
            //获取数据表格，选中的记录数据
            var checkStatus = table.checkStatus(data.config.id);
            //打开授权对话框
            openAddGrantDialog(checkStatus.data);
        }

    });

    function openAddGrantDialog(data) {

        //判断是否选择了角色记录
        if (data.length < 1) {
            layer.msg("请选择需要授权的角色", {icon: 5});
            return;
        }

        //只支持单个角色授权
        if (data.length > 1) {
            layer.msg("暂不支持批量授权", {icon: 5});
            return;
        }

        var url = ctx + "/module/toAddGrantPage?roleId="+data[0].id;
        var title = "<h3>角色管理-角色授权</h3>";

        layui.layer.open({
            title: title,
            content: url,
            type: 2,
            area: ["600px", "600px"],
            maxmin: true
        });
    }

    function openAddOrUpdateRoleDialog(roleId) {
        var title = "<h3>角色管理-添加角色</h3>";
        var url = ctx + "/role/toAddOrUpdateRolePage";
        if (null != roleId && roleId != '') {
            title = "<h3>角色管理-修改角色</h3>";
            url += "?roleId=" + roleId;
        }
        //iframe层
        layui.layer.open({
            type: 2,
            title: title,
            shadeClose: true,
            shade: 0.8,
            area: ['500px', '300px'],
            content: url,
            maxmin: true,
        });
    }

    table.on('tool(roles)', function (data) {
        if (data.event == 'edit') {
            console.log(data);
            //编辑事件
            openAddOrUpdateRoleDialog(data.data.id);
        } else if (data.event == 'del') {
            //删除事件
            layer.confirm('确认删除', {icon: 3, title: "角色管理"}, function (index) {

                //关闭确认源
                layer.close(index);
                //发送ajax请求
                $.ajax({
                    type: "get",
                    url: ctx + "/role/delete",
                    data: {
                        roleId: data.data.id
                    },
                    success: function (result) {
                        if (result.code == 200) {
                            //成功
                            layer.msg("删除角色成功", {icon: 6});
                            tableIns.reload();
                        } else {
                            layer.msg("删除角色失败", {icon: 5});
                        }
                    }
                });
            });
        }
    })

});
